<script setup lang="ts">
import { ref, watch } from "vue";
import { FormInstance } from "element-plus";

import {
  IconAdam,
  IconHnwDC1000,
  IconValve,
  IconSwitch,
  IconThermocouple,
  IconPressductor,
  IconLed,
  IconDTS,
  IconLoRa
} from "./DeviceIcons";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  },
  deviceTypeCategories: { type: Array, default: () => [] }
});

const ruleFormRef = ref<FormInstance>();
const formVisible = ref(false);
const formData = ref(props.data);
const activeNames = ref<number[]>([]);

const handleTypeChange = (val: string) => {
  console.log("handleTypeChange");
  console.log(formData.value);

  formData.value.model = val;
  console.log(formData.value.model);
  console.log(val);

  closeDialog();
  emit("device-type-change", val);
};

const ICONLIST = {
  ADAM4024: IconAdam,
  ADAM4118: IconAdam,
  ADAM4150: IconAdam,
  HnwDC1000: IconHnwDC1000,
  VALVE: IconValve,
  THERMOCOUPLE: IconThermocouple,
  PRESSDUCTOR: IconPressductor,
  LED: IconLed,
  SWITCH: IconSwitch,
  LORA: IconLoRa,
  DTS: IconDTS
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const closeDialog = () => {
  formVisible.value = false;
  resetForm(ruleFormRef.value);
};

const emit = defineEmits(["update:visible", "device-type-change"]);
watch(
  () => formVisible.value,
  val => {
    emit("update:visible", val);
  }
);

watch(
  () => props.visible,
  val => {
    formVisible.value = val;
  }
);

watch(
  () => props.data,
  val => {
    formData.value = val;
  }
);

watch(
  () => props.deviceTypeCategories,
  val => {
    activeNames.value = Array.from({ length: val.length }, (_, index) => index);
  }
);
</script>
<template>
  <el-dialog
    v-model="formVisible"
    title="添加设备"
    :width="680"
    :before-close="closeDialog"
  >
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(device, index) in deviceTypeCategories"
        :title="device.label"
        :name="index"
        :key="index"
      >
        <el-row :gutter="12">
          <el-col
            v-for="deviceType in device.children"
            :key="deviceType.value"
            :span="8"
          >
            <el-card
              shadow="hover"
              class="flex items-center"
              style="cursor: pointer; margin: 8px"
              @click="handleTypeChange(deviceType.value)"
            >
              <!-- <component :is="deviceType.icon" /> -->
              <el-row
                class="justify-center items-center"
                style="flex-wrap: nowrap"
              >
                <div
                  :style="{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: '30px',
                    height: '30px',
                    padding:
                      deviceType.value === 'HnwDC1000'
                        ? '5px'
                        : deviceType.value === 'SWITCH'
                        ? '5px'
                        : deviceType.value === 'ALARM'
                        ? '4px'
                        : deviceType.value === 'VALVE'
                        ? '1px'
                        : '3px'
                  }"
                >
                  <component
                    :style="{
                      width: '100%',
                      height:
                        deviceType.value === 'ADAM4024' ||
                        deviceType.value === 'ADAM4118' ||
                        deviceType.value === 'ADAM4150'
                          ? '110%'
                          : '100%'
                    }"
                    :is="ICONLIST[deviceType.value]"
                  />
                </div>
                <div style="margin-left: 7px">
                  <div>{{ deviceType.title }}</div>
                  <div>
                    <el-text size="small">{{ deviceType.label }}</el-text>
                  </div>
                </div>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </el-dialog>
</template>
